<!DOCTYPE html>
<html lang="en">

<head>
    <title>3D 查看器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {

            background-color: #000;
            color: #fff;
            margin: 0;
            overflow: hidden;
        }

        .up {

            position: absolute;
            top: 90%;
            left: 20%;

        }

        .color {
            position: absolute;
            top: 90%;
            left: 60%;

        }

        .png {
            position: absolute;
            top: 80%;
            left: 60%;

        }


        .img1 {
            position: absolute;
            top: 10%;
            left: 30%;
            width: 100px;
            height: 100px;
        }

        .img2 {
            position: absolute;
            top: 10%;
            left: 40%;
            width: 100px;
            height: 100px;
        }

        .img3 {
            position: absolute;
            top: 10%;
            left: 50%;
            width: 100px;
            height: 100px;
        }

        .img4 {
            position: absolute;
            top: 10%;
            left: 60%;
            width: 100px;
            height: 100px;
        }

        #clo1 {
            position: absolute;
            left: 0;
            top: 14%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #normal1 {
            position: absolute;
            left: 0;
            top: 28%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #color1 {
            position: absolute;
            left: 0;
            top: 42%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #op1 {
            position: absolute;
            left: 0;
            top: 56%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #clo2 {
            position: absolute;
            left: 20%;
            top: 14%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #normal2 {
            position: absolute;
            left: 20%;
            top: 28%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;

        }

        #color2 {
            position: absolute;
            left: 20%;
            top: 42%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }

        #op2 {
            position: absolute;
            left: 20%;
            top: 56%;
            width: 20%;
            height: 14%;
            color: red;
            background: #333;
            z-index: 1002;
        }
    </style>
    <script src="js/setShape.js"></script>
</head>

<body>

    <div class='canvas' id='canvas' style="height: 80%"></div>
    <div class="box">
        <div class="up">

            <input class="btn" value="男模1" type="button" onclick=userData1();>
            <input class="btn" value="男模2" type="button" onclick=userData2();>
            <input class="btn" value="男模3" type="button" onclick=userData3();>
            <input class="btn" value="男模4" type="button" onclick=userData4();>
            <input class="btn" value="男模5" type="button" onclick=userData5();>

        </div>
        <div class="color">

            <input class="btn" value="女模1" type="button" onclick=userData01();>
            <input class="btn" value="女模2" type="button" onclick=userData02();>
            <input class="btn" value="女模3" type="button" onclick=userData03();>
            <input class="btn" value="女模4" type="button" onclick=userData04();>
            <input class="btn" value="女模5" type="button" onclick=userData05();>


        </div>

        <div class="png">

            <input class="btn" id="submit2" value="截图" type="button" onclick=getImageToUpload();>

        </div>

        <div class="img">
            <img src="" alt="" id='img1' class='img1'>
            <img src="" alt="" id='img2' class='img2'>
            <img src="" alt="" id='img3' class='img3'>
            <img src="" alt="" id='img4' class='img4'>
        </div>

        <div id="clo1">
            <input class='input' type="file" name="textureUpload" id="clothes1">
            <input class="btn" id="doClo1" value="上传衣服1" type="button">
            <label for="upload6" class="none" id="uploadClo1">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadCloX1" onclick="return false">
        </div>
        <div id="normal1">
            <input class='input' type="file" name="textureUpload" id="normalMap1">
            <input class="btn" id="doNor1" value="上传法线贴图1" type="button">
            <label for="upload6" class="none" id="uploadNor1">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadNorX1" onclick="return false">
        </div>
        <div id="color1">
            <input class='input' type="file" name="textureUpload" id="colorMap1">
            <input class="btn" id="doCol1" value="上传颜色贴图1" type="button">
            <label for="upload6" class="none" id="uploadCol1">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadColX1" onclick="return false">
        </div>
        <div id="op1">
            <input class='input' type="file" name="textureUpload" id="alphaMap1">
            <input class="btn" id="doAl1" value="上传透明贴图1" type="button">
            <label for="upload6" class="none" id="uploadAl1">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadAlX1" onclick="return false">
        </div>

        <div id="clo2"><input class='input' type="file" name="textureUpload" id="clothes2">
            <input class="btn" id="doClo2" value="上传衣服2" type="button">
            <label for="upload6" class="none" id="uploadClo2">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadCloX2" onclick="return false">
        </div>
        <div id="normal2">
            <input class='input' type="file" name="textureUpload" id="normalMap2">
            <input class="btn" id="doNor2" value="上传法线贴图2" type="button">
            <label for="upload6" class="none" id="uploadNor2">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadNorX2" onclick="return false">
        </div>
        <div id="color2">
            <input class='input' type="file" name="textureUpload" id="colorMap2">
            <input class="btn" id="doCol2" value="上传颜色贴图2" type="button">
            <label for="upload6" class="none" id="uploadCol2">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadColX2" onclick="return false">
        </div>
        <div id="op2"><input class='input' type="file" name="textureUpload" id="alphaMap2">
            <input class="btn" id="doAl2" value="上传透明贴图2" type="button">
            <label for="upload6" class="none" id="uploadAl2">上传完成</label><input type="checkbox" name="radioUp"
                id="uploadAlX2" onclick="return false">
        </div>
    </div>


    <script src="js/three.js"></script>

    <script src="js/inflate.min.js"></script>
    <script src="js/FBXLoader.js"></script>
    <script src="js/PLYLoader.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/dat.gui.min.js"></script>
    <script src="js/Measure.js"></script>
    <script src="js/setShape.js"></script>


    <script src="js/OrbitControls.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>

    <script>

        // if (true) {} ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats, controls, activeAction;
        var camera, scene, renderer;
        var mixer;
        var sceneFlag = 0;//0代表黑色 1代表白色

        var userData = {};

        var sexFlag = 0;

        var clock = new THREE.Clock();

        var mixers = [];

        var textureLoader = new THREE.TextureLoader();

        var getImageData = 0;
        var imgData = null;

        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        var img3 = document.getElementById('img3');
        var img4 = document.getElementById('img4');

        var clothes1 = document.getElementById('clothes1');
        var colorMap1 = document.getElementById('colorMap1');
        var normalMap1 = document.getElementById('normalMap1');
        var alphaMap1 = document.getElementById('alphaMap1');

        var clothes2 = document.getElementById('clothes2');
        var colorMap2 = document.getElementById('colorMap2');
        var normalMap2 = document.getElementById('normalMap2');
        var alphaMap2 = document.getElementById('alphaMap2');

        init();
        animate();

        clothes1.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadClothes1(newUrl);
            }
        };
        colorMap1.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap1(newUrl, 'map');
            }
        };
        normalMap1.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap1(newUrl, 'normalMap');
            }
        };
        alphaMap1.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap1(newUrl, 'alphaMap');
            }
        };
        clothes2.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadClothes2(newUrl);
            }
        };
        colorMap2.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap2(newUrl, 'map');
            }
        };
        normalMap2.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap2(newUrl, 'normalMap');
            }
        };
        alphaMap2.onchange = function () {

            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var newUrl = this.result;
                loadMap2(newUrl, 'alphaMap');
            }
        };


        function init() {

            var canvas = document.getElementById('canvas');

            container = document.createElement('div');
            canvas.appendChild(container);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
            camera.position.set(0, 85, 220);


            controls = new THREE.OrbitControls(camera);
            controls.target.set(0, 85, 0);
            controls.update();

            scene = new THREE.Scene();
            //scene.background = new THREE.Color(0x4d4d4d);
            //scene.fog = new THREE.Fog(0x4d4d4d, 900, 1000);

            var axesHelper = new THREE.AxesHelper(5);
            scene.add(axesHelper);

            var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);//0xde6e6e
            scene.add(ambientLight);

            // 平行光一
            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(50, 100, 300);
            directionalLight.castShadow = true;
            directionalLight.shadow.camera.near = 0.1;
            directionalLight.shadow.camera.far = 1000;
            directionalLight.shadow.camera.top = 1000;
            directionalLight.shadow.camera.bottom = -1000;
            directionalLight.shadow.camera.left = -1000;
            directionalLight.shadow.camera.right = 1000;
            directionalLight.shadow.mapSize.width = 1024;
            directionalLight.shadow.mapSize.height = 1024;
            directionalLight.shadow.radius = 1.0;
            directionalLight.shadow.bias = -0.005;

            scene.add(directionalLight);

            //
            var directionalLight1 = new THREE.PointLight(0x9bbadb, 0.8);
            directionalLight1.position.set(50, 140, -100);
            scene.add(directionalLight1);

            var pointLight1 = new THREE.PointLight(0xffdfbf, 0.2);
            pointLight1.position.set(50, 40, 0);
            scene.add(pointLight1);

            var pointLight2 = new THREE.PointLight(0xffffff, 0.4);
            pointLight2.position.set(-50, 40, 0);
            scene.add(pointLight2);


            // ground
            var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshLambertMaterial({
                color: 0x333333,
                depthWrite: false
            }));
            mesh.rotation.x = -Math.PI / 2;
            mesh.name = 'groundColor';
            //mesh.receiveShadow = true;
            scene.add(mesh);

            var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
            grid.material.opacity = 0.4;
            grid.material.transparent = true;
            scene.add(grid);

            // model
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            renderer.setClearAlpha(0);
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            renderer.shadowMapSoft = true;
            container.appendChild(renderer.domElement);
            // container.style.margin=0;
            // canvas.style.margin = 0;
            window.addEventListener('resize', onWindowResize, false);

            // stats
            stats = new Stats();
            //container.appendChild( stats.dom );

        }

        function userData1() {

            // userData.height = 1750;
            // userData.shoulder = 440;
            // userData.chest = 920;
            // userData.waist = 780;
            // userData.hip = 932;
            //
            // userData.legLength = 750;

            userData.height = 1900;
            userData.shoulder = 440;
            userData.chest = 1025;
            userData.waist = 1046;
            userData.hip = 1070;

            userData.legLength = 832;

            load1();


        }

        function userData2() {

            userData.height = 1900;
            userData.shoulder = 408;
            userData.chest = 800;
            userData.waist = 660;
            userData.hip = 852;
            userData.legLength = 800;

            load1();


        }

        function userData3() {

            userData.height = 1900;
            userData.shoulder = 476;
            userData.chest = 1220;
            userData.waist = 1194;
            userData.hip = 1042;
            userData.legLength = 800;

            load1();


        }

        function userData4() {

            userData.height = 1600;
            userData.shoulder = 405;
            userData.chest = 800;
            userData.waist = 660;
            userData.hip = 852;
            userData.legLength = 680;

            load1();


        }

        function userData5() {

            userData.height = 1600;
            userData.shoulder = 476;
            userData.chest = 1220;
            userData.waist = 1194;
            userData.hip = 1042;
            userData.legLength = 680;

            load1();


        }

        function userData01() {

            // userData.height = 1650;
            // userData.shoulder = 380;
            // userData.chest = 880;
            // userData.waist = 680;
            // userData.hip = 905;
            // userData.legLength = 700;

            userData.height = 1900;
            userData.shoulder = 440;
            userData.chest = 1025;
            userData.waist = 1046;
            userData.hip = 1070;

            userData.legLength = 832;

            load2();


        }

        function userData02() {

            userData.height = 1800;
            userData.shoulder = 360;
            userData.chest = 800;
            userData.waist = 620;
            userData.hip = 840;
            userData.legLength = 750;

            load2();


        }

        function userData03() {

            userData.height = 1800;
            userData.shoulder = 420;
            userData.chest = 1220;
            userData.waist = 1194;
            userData.hip = 1042;
            userData.legLength = 750;

            load2();


        }

        function userData04() {

            userData.height = 1500;
            userData.shoulder = 360;
            userData.chest = 800;
            userData.waist = 620;
            userData.hip = 840;
            userData.legLength = 640;

            load2();


        }

        function userData05() {

            userData.height = 1500;
            userData.shoulder = 420;
            userData.chest = 1220;
            userData.waist = 1194;
            userData.hip = 1042;
            userData.legLength = 640;

            load2();


        }

        // 男模
        function load1() {


            sexFlag = 1;
            var texture = textureLoader.load('texture/Model_nan.png');


            var fbxGroup = scene.getObjectByName('fbxGroup');
            scene.remove(fbxGroup);
            var loader = new THREE.FBXLoader();
            loader.load('fbx/nan.fbx', function (object) {

                object.traverse(function (child) {

                    if (child.isMesh) {

                        child.material = new THREE.MeshStandardMaterial();

                        child.material.roughness = 1;
                        child.material.metalness = 0;
                        child.material.map = texture;
                        child.material.skinning = true;
                        child.castShadow = true;
                        child.receiveShadow = true;
                        child.name = 'fbx';
                    }

                });

                console.log(object);
                object.name = 'fbxGroup';
                scene.add(object);

                // object.rotation.y = Math.PI * 0.5;

                var name = 'fbx';
                var groupName = 'fbxGroup';
                var shoulder = userData.shoulder; //用户输入肩宽;
                var legLength = userData.legLength; //用户输入腿长;
                var height = userData.height; //用户输入身高;
                var shoulderHeight = height - 250;

                var userInputData = [];
                var data = {
                    shoulder: shoulderHeight,
                    crotch: legLength
                };
                userInputData.push(data);


                var measure = new Measure();
                measure.disposeBwhXY(userData.chest, userData.waist, userData.hip, 1, function (a) {

                    console.log(a);
                    setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name, groupName, sexFlag);

                    var fbx1 = scene.getObjectByName('fbx1');
                    var fbx2 = scene.getObjectByName('fbx2');

                    if (typeof (fbx1) != 'undefined') {
                        var name1 = 'fbx1';
                        setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name1, groupName, sexFlag);

                    }


                    if (typeof (fbx2) != 'undefined') {
                        var name2 = 'fbx2';
                        setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name2, groupName, sexFlag);

                    }

                });


            });


        }
        // 女模
        function load2() {

            sexFlag = 0;
            var fbxGroup = scene.getObjectByName('fbxGroup');
            scene.remove(fbxGroup);

            var texture = textureLoader.load('texture/Model_nan_qiuyi.png');

            var fbxGroup = scene.getObjectByName('fbxGroup');
            scene.remove(fbxGroup);
            var loader = new THREE.FBXLoader();
            loader.load('fbx/nv.fbx', function (object) {

                object.traverse(function (child) {

                    if (child.isMesh) {
                        child.material = new THREE.MeshStandardMaterial();
                        child.material.roughness = 0.9;
                        child.material.metalness = 0;
                        child.material.map = texture;
                        child.material.skinning = true;
                        child.castShadow = true;
                        child.receiveShadow = true;
                        child.name = 'fbx';
                    }

                });
                object.name = 'fbxGroup';
                scene.add(object);
                var name = 'fbx';
                var groupName = 'fbxGroup';
                var shoulder = userData.shoulder; //用户输入肩宽;
                var legLength = userData.legLength; //用户输入腿长;
                var height = userData.height; //用户输入身高;
                var shoulderHeight = height - 22;

                var userInputData = [];
                var data = {
                    shoulder: shoulderHeight,
                    crotch: legLength
                };
                userInputData.push(data);

                var measure = new Measure();
                measure.disposeBwhXY(userData.chest, userData.waist, userData.hip, 1, function (a) {


                    setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name, groupName, sexFlag);


                    var fbx1 = scene.getObjectByName('fbx1');
                    var fbx2 = scene.getObjectByName('fbx2');

                    if (typeof (fbx1) != 'undefined') {
                        var name1 = 'fbx1';
                        setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name1, groupName, sexFlag);

                    }


                    if (typeof (fbx2) != 'undefined') {
                        var name2 = 'fbx2';
                        setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name2, groupName, sexFlag);

                    }

                });


            });

        }

        // 衣服1
        function loadClothes1(mUrl) {

            var cloGroup1 = scene.getObjectByName('cloGroup1');
            scene.remove(cloGroup1);
            var loader = new THREE.FBXLoader();
            loader.load(mUrl, function (object) {

                object.traverse(function (child) {

                    if (child.isMesh) {
                        child.material = new THREE.MeshStandardMaterial();
                        child.material.roughness = 0.9;
                        child.material.metalness = 0;
                        child.material.skinning = true;
                        child.material.transparent = true;
                        child.castShadow = true;
                        child.receiveShadow = true;
                        child.name = 'fbx1';
                    }

                });
                object.name = 'cloGroup1';
                scene.add(object);

                var name = 'fbx1';
                var groupName = 'cloGroup1';
                var shoulder = userData.shoulder; //用户输入肩宽;
                var legLength = userData.legLength; //用户输入腿长;
                var height = userData.height; //用户输入身高;
                var shoulderHeight = height - 22;

                var userInputData = [];
                var data = {
                    shoulder: shoulderHeight,
                    crotch: legLength
                };
                userInputData.push(data);

                var measure = new Measure();
                measure.disposeBwhXY(userData.chest, userData.waist, userData.hip, 1, function (a) {

                    console.log(a);
                    setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name, groupName, sexFlag);

                });

            });
        }

        // 衣服2
        function loadClothes2(mUrl) {

            var cloGroup2 = scene.getObjectByName('cloGroup2');
            scene.remove(cloGroup2);
            var loader = new THREE.FBXLoader();
            loader.load(mUrl, function (object) {

                object.traverse(function (child) {

                    if (child.isMesh) {
                        child.material = new THREE.MeshStandardMaterial();
                        child.material.roughness = 0.9;
                        child.material.metalness = 0;
                        child.material.skinning = true;
                        child.material.transparent = true;
                        child.castShadow = true;
                        child.receiveShadow = true;
                        child.name = 'fbx2';
                    }

                });
                object.name = 'cloGroup2';
                scene.add(object);

                var name = 'fbx2';
                var groupName = 'cloGroup2';
                var shoulder = userData.shoulder; //用户输入肩宽;
                var legLength = userData.legLength; //用户输入腿长;
                var height = userData.height; //用户输入身高;
                var shoulderHeight = height - 22;

                var userInputData = [];
                var data = {
                    shoulder: shoulderHeight,
                    crotch: legLength
                };
                userInputData.push(data);

                var measure = new Measure();
                measure.disposeBwhXY(userData.chest, userData.waist, userData.hip, 1, function (a) {

                    console.log(a);
                    setShape.temporaryPhotoSetShape(userInputData, shoulder, a, name, groupName, sexFlag);

                });
            });
        }

        function loadMap1(tUrl, type) {
            var texture = textureLoader.load(tUrl);
            var model = scene.getObjectByName('fbx1');
            console.log(model);
            if (type === 'map') {
                model.material.map = texture;
                model.material.needsUpdate = true;
            } else if (type === 'roughnessMap') {

                model.material.roughnessMap = texture;
                model.material.needsUpdate = true;
            } else if (type === 'aoMap') {

                model.material.aoMap = texture;
                model.material.needsUpdate = true;
            } else if (type === 'normalMap') {

                model.material.normalMap = texture;
                model.material.needsUpdate = true;
                console.log(model);
            } else if (type === 'alphaMap') {

                model.material.alphaMap = texture;
                model.material.needsUpdate = true;
            }
        }

        function loadMap2(tUrl, type) {

            var texture = textureLoader.load(tUrl);
            var model = scene.getObjectByName('fbx2');

            console.log(model);

            if (type === 'map') {
                model.material.map = texture;
                model.material.needsUpdate = true;
            } else if (type === 'roughnessMap') {

                model.material.roughnessMap = texture;
                model.material.needsUpdate = true;
            } else if (type === 'aoMap') {

                model.material.aoMap = texture;
                model.material.needsUpdate = true;
            } else if (type === 'normalMap') {

                model.material.normalMap = texture;
                model.material.needsUpdate = true;
                console.log(model);
            } else if (type === 'alphaMap') {

                model.material.alphaMap = texture;
                model.material.needsUpdate = true;
            }
        }

        function changeFogColor() {

            var groundColor = scene.getObjectByName('groundColor');
            if (sceneFlag === 0) {
                console.log(scene.fog);
                scene.fog = new THREE.Fog(0xD4D4D4, 900, 1000);
                scene.background = new THREE.Color(0xD4D4D4);
                groundColor.material.color = new THREE.Color(0xD4D4D4);
                groundColor.material.needsUpdate = true;
                sceneFlag = 1;
            } else {
                scene.fog = new THREE.Fog(0x4d4d4d, 900, 1000);
                scene.background = new THREE.Color(0x4d4d4d);
                groundColor.material.color = new THREE.Color(0x4d4d4d);
                groundColor.material.needsUpdate = true;
                sceneFlag = 0;
            }

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        /**
         * 重新计算相机视角
         */
        function resize(width, height) {

            camera.position.set(0, 85, 220);
            controls.target.set(0, 85, 0);
            controls.update();

            camera.aspect = width / height;
            camera.updateProjectionMatrix();
            renderer.setSize(width, height);

        }

        function animate() {

            requestAnimationFrame(animate);

            if (mixer) mixer.update(1);

            renderer.render(scene, camera);

            if (getImageData > 0 && getImageData < 10) {

                var fbxGroup = scene.getObjectByName('fbxGroup');
                var cloGroup1 = scene.getObjectByName('cloGroup1');
                var cloGroup2 = scene.getObjectByName('cloGroup2');

                if (!cloGroup1 && !cloGroup2) return;

                cloGroup1 = cloGroup1 != undefined ? cloGroup1 : new THREE.Group();
                cloGroup2 = cloGroup2 != undefined ? cloGroup2 : new THREE.Group();

                if (!fbxGroup) return;

                resize(470, window.innerHeight);

                if (getImageData === 1) {

                    fbxGroup.rotation.y = Math.PI * 2;
                    cloGroup1.rotation.y = Math.PI * 2;
                    cloGroup2.rotation.y = Math.PI * 2;

                } else if (getImageData === 2) {

                    resize(470, window.innerHeight);

                    imgData = renderer.domElement.toDataURL();

                    img1.src = imgData;

                    var a = document.createElement('a');

                    // 创建一个单击事件
                    var event = new MouseEvent('click');

                    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                    a.download = name || '下载图片名称1';
                    // 将生成的URL设置为a.href属性
                    a.href = imgData;

                    // 触发a的单击事件
                    a.dispatchEvent(event);

                } else if (getImageData === 3) {

                    fbxGroup.rotation.y = Math.PI * 0.5;
                    cloGroup1.rotation.y = Math.PI * 0.5;
                    cloGroup2.rotation.y = Math.PI * 0.5;

                } else if (getImageData === 4) {

                    resize(470, window.innerHeight);

                    imgData = renderer.domElement.toDataURL();
                    img2.src = imgData;

                    var a = document.createElement('a');

                    // 创建一个单击事件
                    var event = new MouseEvent('click');

                    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                    a.download = name || '下载图片名称2';

                    // 将生成的URL设置为a.href属性
                    a.href = imgData;

                    // 触发a的单击事件
                    a.dispatchEvent(event);

                } else if (getImageData === 5) {

                    fbxGroup.rotation.y = Math.PI * -0.5;
                    cloGroup1.rotation.y = Math.PI * -0.5;
                    cloGroup2.rotation.y = Math.PI * -0.5;

                } else if (getImageData === 6) {

                    resize(470, window.innerHeight);

                    imgData = renderer.domElement.toDataURL();
                    img3.src = imgData;

                    var a = document.createElement('a');
                    // 创建一个单击事件
                    var event = new MouseEvent('click');

                    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                    a.download = name || '下载图片名称3';
                    // 将生成的URL设置为a.href属性
                    a.href = imgData;

                    // 触发a的单击事件
                    a.dispatchEvent(event);

                } else if (getImageData === 7) {

                    fbxGroup.rotation.y = -Math.PI;
                    cloGroup1.rotation.y = Math.PI;
                    cloGroup2.rotation.y = Math.PI;

                } else if (getImageData === 8) {

                    resize(470, window.innerHeight);

                    imgData = renderer.domElement.toDataURL();
                    img4.src = imgData;

                    var a = document.createElement('a');

                    // 创建一个单击事件
                    var event = new MouseEvent('click');

                    // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                    a.download = name || '下载图片名称4';

                    // 将生成的URL设置为a.href属性
                    a.href = imgData;

                    // 触发a的单击事件
                    a.dispatchEvent(event);


                } else if (getImageData == 9) {

                    fbxGroup.rotation.y =  Math.PI * 2;
                    cloGroup1.rotation.y = Math.PI * 2;
                    cloGroup2.rotation.y = Math.PI * 2;

                    resize(window.innerWidth, window.innerHeight);

                }

                getImageData++;

            } else {

                getImageData = 0;

            }

        }


        function getImageToUpload() {

            getImageData = 1;

        }


    </script>

</body>

</html>